<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="multipart/form-data; charset=utf-8" />
    <title>z-UI-alert</title>
    <link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-alert/css/z-UI.alert.css"/>
    <link rel="stylesheet" type="text/css" href="z-UI-tab/css/z-UI.tab.css"/>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="z-UI.js"></script>
    <script type="text/javascript" src="z-UI-alert/js/z-UI.alert.js"></script>
    <script type="text/javascript" src="z-UI-tab/js/z-UI.tab.js"></script>
    <style>
    </style>
</head>
<body class="zUI-app">

<div class="zUI-full" style="overflow-x: hidden;overflow-y: auto;padding: 20px;">
    <span class="zUI-strik">基本对话框弹窗</span>
    <a class="zUI-btn md info" onclick="doa1()">普通弹窗</a>
    <a class="zUI-btn md info" onclick="doa2()">带遮罩</a>
    <a class="zUI-btn md info" onclick="doa3()">带按钮</a>
    <a class="zUI-btn md info" onclick="doa4()">可拖拽</a>
    <a class="zUI-btn zUI-btn-null success md" onclick="doa5()">右下角拖动缩放大小</a>
    <div class="zUI-card sm mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code1"></pre>
        </div>
    </div>



    <span class="zUI-strik">绑定事件</span>
    <a class="zUI-btn md info" onclick="doa_evt1()">按钮事件</a>
    <a class="zUI-btn md info" onclick="doa_evt2()">弹窗关闭事件</a>
    <div class="zUI-card sm mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code2"></pre>
        </div>
    </div>
    <span class="zUI-strik">高级弹出层</span>
    <a class="zUI-btn success md" onclick="doa7()">弹出dom元素</a>
    <div class="zUI-card sm mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code3"></pre>
        </div>
    </div>
    <span class="zUI-strik">遮罩</span>
    <a class="zUI-btn zUI-btn-null success md" onclick="doa6()">加载中</a>
    <a class="zUI-btn zUI-btn-null success md" onclick="doa8()">带文字</a>
    <div class="zUI-card sm mt10" zUI-folder="hide" style="width: 100%;">
        <div class="zUI-card-title">
            <div class="text">查看代码</div>
        </div>
        <div class="zUI-card-wrap">
            <pre class="zUI-code" id="code4"></pre>
        </div>
    </div>
</div>
<div id="domUI" style="padding: 5px;">
    <h4>请输入你的姓名</h4>
    <input class="zUI-input" id="yourN"/>
</div>
</body>

<script>
    $(function () {
        zUI.tab.loadPanel({
            elem:'.zUI-card'
        });
        zUI.code.render({
            style: 'js',
            elem:'#code1',
            value:'zUI.dialog.alert(\'这是一个普通弹窗\',\'提示\',{shadow:false,draggable:false,btns:false});\n' +
                'zUI.dialog.alert(\'这是一个可拖拽弹窗\',\'提示\',{\n' +
                '   btns:{\n' +
                '       \'保存\':function(){\n' +
                '           return false;\n' +
                '       },\n' +
                '       \'取消\':function(){\n' +
                '           return true;\n' +
                '       }\n' +
                '   }\n' +
                '})\n' +
                'zUI.dialog.alert(\'这是一个右下角可缩放弹窗\',\'提示\',{\n' +
                '   resizable: true,\n' +
                '   btns:{\n' +
                '       \'保存\':function(){\n' +
                '           return false;\n' +
                '       },\n' +
                '       \'取消\':function(){\n' +
                '           return true;\n' +
                '       }\n' +
                '   }\n' +
                '})',
        });
        zUI.code.render({
            style: 'js',
            elem:'#code2',
            value:'zUI.dialog.alert(\'这是一个带按钮事件的弹窗\',\'提示\',{\n' +
                '            draggable:false,\n' +
                '            btns:{\n' +
                '                \'确定\':function(){\n' +
                '                    zUI.dialog.alert(\'你点了确定\');\n' +
                '                    return true;\n' +
                '                }\n' +
                '            }\n' +
                '        })\n' +
                'zUI.dialog.alert(\'这是一个带按钮事件的弹窗\',\'提示\',{\n' +
                '            draggable:false,\n' +
                '            beforeClose:function(){\n' +
                '                alert(\'弹窗即将关闭\');\n' +
                '                return true;\n' +
                '            },\n' +
                '            close:function(){\n' +
                '                zUI.dialog.alert(\'<em>弹窗关闭之后</em>\');\n' +
                '                return true;\n' +
                '            }\n' +
                '        })',
        });
        zUI.code.render({
            style: 'js',
            elem:'#code3',
            value:'zUI.dialog.alertDom({\n' +
                '            target:\'#domUI\',\n' +
                '            title:\'弹出dom\',\n' +
                '            btns:{\n' +
                '                \'提交\': function () {\n' +
                '                    zUI.dialog.alert($("#yourN").val());\n' +
                '                },\n' +
                '\n' +
                '                \'关闭\': function () {\n' +
                '\n' +
                '                }\n' +
                '            }\n' +
                '        });',
        });
        zUI.code.render({
            style: 'js',
            elem:'#code4',
            value:'zUI.dialog.showMask({delay:3000});',
        });
    });
    function doa_evt1() {
        zUI.dialog.alert('这是一个带按钮事件的弹窗','提示',{
            draggable:false,
            btns:{
                '确定':function(){
                    zUI.dialog.alert('你点了确定');
                    return true;
                }
            }
        })
    }
    function doa_evt2() {
        zUI.dialog.alert('这是一个带按钮事件的弹窗','提示',{
            draggable:false,
            beforeClose:function(){
                alert('弹窗即将关闭');
                return true;
            },
            close:function(){
                zUI.dialog.alert('<em>弹窗关闭之后</em>');
                return true;
            }
        })
    }
    function doa7() {
        zUI.dialog.alertDom({
            target:'#domUI',
            title:'弹出dom',
            btns:{
                '提交': function () {
                    zUI.dialog.alert($("#yourN").val());
                },

                '关闭': function () {

                }
            }
        });
    }
    function doa8() {
        zUI.dialog.showMask({delay:3000,text:'数据加载中'});
    }
    function doa6() {
        zUI.dialog.showMask({delay:3000});
    }
    function doa1() {
        zUI.dialog.alert('这是一个普通弹窗','提示',{shadow:false,draggable:false,btns:false});
    }
    function doa2() {
        zUI.dialog.alert('这是一个带遮罩弹窗','提示',{draggable:false,btns:false});
    }
    function doa3() {
        zUI.dialog.alert('这是一个带按钮的弹窗','提示',{
            draggable:false,
            btns:{
                '确定':function(){
                    return true;
                }
            }
        })
    }
    function doa4() {
        zUI.dialog.alert('这是一个可拖拽弹窗','提示',{
            btns:{
                '保存':function(){
                    return false;
                },
                '取消':function(){
                    return true;
                }
            }
        })
    }
    function doa5() {
        zUI.dialog.alert('这是一个右下角可缩放弹窗','提示',{
            resizable: true,
            btns:{
                '保存':function(){
                    return false;
                },
                '取消':function(){
                    return true;
                }
            }
        })
    }

</script>


</html>